import React, {Component} from 'react';
import {Form, Input, Button, Icon} from 'antd';
class Search extends Component{
  constructor(props){
    super(props);
    this.state = {
      title: '',
      keyword: ''
    };
  }

  handleChange = (e) => {
    let name = e.target.name;
    this.setState({
      [name]: e.target.value
    });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    let {title, keyword} = this.state;
    this.props.doSearch({title, keyword});
  }

  render() {
    let {title, keyword} = this.state;
    return (<Form onSubmit={this.handleSubmit} layout="inline">
      <Form.Item label="标题：">
        <Input value={title} name="title" onChange={this.handleChange} prefix={<Icon type="profile" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="标题" />
      </Form.Item>
      <Form.Item label="关键字：">
        <Input value={keyword} name="keyword" onChange={this.handleChange} prefix={<Icon type="bars" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="关键字" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">搜索</Button>
      </Form.Item>
    </Form>);
  }
}

const WrappedSearch = Form.create({})(Search);
export default WrappedSearch;